<template>
  <div class="q-pa-sm">
    <q-card flat square>
      <q-card-section class="q-pa-none q-py-md row">
        <div class="col-sm-2 col-xs-12 q-pb-sm">
          <q-tabs v-model="settingsTab" align="left" active-color="primary" active-bg-color="blue-1" class="text-grey-10" vertical >
            <q-tab name="basicSettings" label="订单信息" style="justify-content: left" content-class="q-pl-md" />
          </q-tabs>
        </div>
        <q-separator :vertical="$q.screen.gt.xs" v-show="$q.screen.gt.xs" />
        <div class="col-sm col-xs-12 q-px-md q-pt-none">
          <q-tab-panels v-model="settingsTab" animated transition-prev="fade" transition-next="fade" >
            <q-tab-panel name="basicSettings" class="row q-pt-sm">
              <!--<div class="text-h5 col-12 q-mb-md">用户信息</div>
              <div class="lt-sm col-xs-12 q-mb-md">
                <span class="text-center block">
                  <q-img src="/img/user/woman.jpg" width="180px" :ratio="10 / 10"/>
                </span>
                <span class="text-center block">
                  <q-btn unelevated color="primary" label="更换头像" con="unarchive" />
                </span>
              </div>-->
              <div class="gt-xs col-md-8 col-sm-7" style="padding-left: 50px;padding-top: 20px;">
                <span class="text-left block" style="padding: 0px 20px 10px 0px;">
                  <h5>充值订单详情</h5>
                </span>
                <span class="text-left block" style="padding: 10px 20px;">
                   充值订单id : {{orderdetail.id}}
                </span>
                <span class="text-left block" style="padding: 10px 20px;">
                   充值订单uid : {{orderdetail.user_id}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  充值订单编码: {{orderdetail.recharge_no}} <button @click="copyText">复制文本</button>
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  第三方订单编码: {{orderdetail.trade_no}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  创建时间 : {{orderdetail.time}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  充值订单金额 : {{orderdetail.account}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  充值订单类型 : {{orderdetail.payment_name}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  备注信息 : {{orderdetail.note}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  <q-btn outline label="返回" color="primary" class="btn-close"  @click="close" />
                </span>
              </div>

            </q-tab-panel>
            <q-tab-panel name="safeSettings" class="q-pt-sm">
              <div class="text-h5 col-12 q-mb-md">日志</div>
              <h5 class="view_title justify-between q-px-md">
                <q-btn dense outline round icon="clear" size="sm"   />
              </h5>
            </q-tab-panel>
            <q-tab-panel name="accountBind" class="q-pt-sm">
              <div class="text-h5 col-12 q-mb-md">优惠券列表</div>
            </q-tab-panel>

          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
import clipboard from 'clipboard'
import { copyToClipboard } from 'quasar'
export default {
  name: 'Settings',
  data() {
    return {
      user_status: {label: '已认证', value: 3},
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        detail: '/rechargedetail'
      },
      settingsTab: 'basicSettings',
      id: '',
      orderdetail: {
        id: '',
        user_id: '',
        recharge_no: '',
        account: '',
        time: '',
        payment_name: '',
        status: ''
      },
      form: {
        id: ''
      }
    };
  },
  methods:{
    requiredTest,
    addBefore() {
    },
    queryParam(){
    },
    close() {
      this.$router.go(-1);
    },
    getDetail(){
      this.$axios.post(this.url.detail, this.form).then((r) => {
        if(r.code == 0){
          this.orderdetail = r.data
          if(this.orderdetail.status == 3) {
            this.user_status = {label: '已认证', value: 3}
          } else if(this.orderdetail.status == 1) {
            this.user_status = {label: '未认证', value: 1}
          } else if(this.orderdetail.status == 0) {
            this.user_status = {label: '待认证', value: 0}
          }
          if(this.orderdetail.group_id == 0) {
            this.user_group = {label: '普通用户', value: 0}
          } else if(this.orderdetail.group_id == 1) {
            this.user_group = {label: '服务商', value: 1}
          } else {
            this.user_group = {label: '普通用户', value: 0}
          }
        }
      });
    },
    copyText() {
      copyToClipboard(this.orderdetail.recharge_no)
        .then(() => {
          this.$q.notify({ position: "center", color: "info", textColor: "blue", group: false, html: true, message: "复制成功", });
        })
        .catch(() => {
        })
    }
  },
  mounted() {
    const id = this.$route.query.id
    this.id = id
    this.form.id = id
    this.getDetail()
  },
};
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_1fgggi4y4wt.css';
</style>
